﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>goalTab</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
    <link href="/css/default.css" rel="stylesheet" />
    <link href="goalTab.css" rel="stylesheet" />
    <script src="/js/common.js"></script>
    <script src="goalTab.js"></script>
    
</head>
<body>
    <div class="fragment homepage">
        <header aria-label="Header content" role="banner">
            <div class="nav">
				<a class="topNavigation" href="/pages/speedTab/speedTab.html">Speed</a>
                <span class="topNavigation" style="color:gray;">Goal</span>
			</div>
			<h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">SpeedCalc</span>
            </h1>
			<div class="switch">
            	<button class="topNavigation " disabled type="button" id="btnMeters">Meters</button>
            	<button class="topNavigation" type="button" id="btnMiles">Miles</button>
			</div>
        </header>
        <section  aria-label="Main content" role="main">
			<div class="mainContent" >
                <div id="goalSection" class="myGrid">
					<select  id="slct_dist" class="mySelects" style="-ms-grid-column:1; -ms-grid-row:1">
						<option>Kilometers</option>
						<option>Meters</option>
					</select>
					<input id="inpt_g_dist" type="number" style="-ms-grid-column:2; -ms-grid-row:1">
					<select  id="slct_time" class="mySelects" style="-ms-grid-column:1; -ms-grid-row:2;">
						<option>Seconds</option>
						<option>Minutes</option>
						<option selected>Hours</option>
					</select>
					<input id="inpt_g_time" type="number" style="-ms-grid-column:2; -ms-grid-row:2">
				</div>
				<div id="speedSection" class="myGrid">
					<div class="myLabel"  id="l_speed" style="-ms-grid-column:1; -ms-grid-row:1">km/h</div>
        			<input disabled id="inpt_speed" type="number" style="-ms-grid-column:2; -ms-grid-row:1">
					<div class="myLabel" id="l_time" style="-ms-grid-column:1; -ms-grid-row:2">min/km</div>
        			<input disabled id="inpt_time" type="number" style="-ms-grid-column:2; -ms-grid-row:2">
					<div class="myLabel" id="l_oposit" style="-ms-grid-column:1; -ms-grid-row:3">mil/h</div>
        			<input disabled id="inpt_oposit" type="number" style="-ms-grid-column:2; -ms-grid-row:3">
				</div>
			</div>
		</section>
    </div>
</body>
</html>
